<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:'个人信息',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="submit">
					<view class="nostrongtext">保存</view>
				</view>
			</view>
		</header-top>
		<view class="headimg" @click="uploadImg()">
			<image :src="userInfo.avatar" mode=""></image>
			<view class="xiangji"></view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="inputbox">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">姓名</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入姓名" v-model="userInfo.username">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">性别</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<u-radio-group v-model="userInfo.gender" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="男"
							name="1"></u-radio>
						<u-radio activeColor="#0BBDCB" label="女" name="2"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="inputbox margin_top" @click="shows=true">

				<view class="flexleft flex1">
					<view class="strongtext margin_right">生日</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请选择生日" disabled v-model="userInfo.birthday">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">微信</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入微信号" v-model="userInfo.wechat_code">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">电话</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入电话" v-model="userInfo.mobile" disabled="">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">电话备注</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入电话备注" v-model="userInfo.mobile_note">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">支付宝账号</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入支付宝账号" v-model="userInfo.ali_account">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">身份证</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入身份证" v-model="userInfo.idcard">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">开户行</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入开户行" v-model="userInfo.open_bank">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">银行账号</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入银行账号" v-model="userInfo.bank_account">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">持卡人</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入持卡人姓名" v-model="userInfo.bank_name">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">省市区选择</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween">
					<uni-data-picker :localdata="items" placeholder="请选择住址" popup-title="请选择地区"
						v-model="userInfo.area_id" @change="bindPickerChange">
						<text class="word12" v-if="!userInfo.area_id">请选择住址</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
					</uni-data-picker>
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">详细地址</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="getLocation">
					<input type="text" placeholder="请选择详细地址" disabled="" v-model="userInfo.address">
					<view class="addressicon2"></view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="shows" v-model="value1" mode="date" :maxDate="time" :minDate="0"
			@confirm="rzTimeconfirm" @cancel="shows=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				userInfo: {
					avatar: "",
					username: "",
					gender: "",
					birthday: "",
					wechat_code: "",
					ali_account: "",
					idcard: "",
					open_bank: "",
					bank_account: "",
					bank_name: "",
					province_id: "",
					city_id: "",
					area_id: "",
					address: "",
					longitude: "",
					latitude: "",
					mobile:"",
					mobile_note:"",
				},
				area: [],
				items: [],
				shows: false,
				time: Number(new Date()),
				value1: Number(new Date()),
			}
		},
		onLoad() {
			this.items = JSON.parse(JSON.stringify(citys.data))
			this.getInfo()
		},
		methods: {
			//验证身份证
			checkidcard(num) {
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (reg.test(num) === false) {
					return false
				} else {
					return true
				}
			},
			submit() {
				let _this = this;
				if (_this.userInfo.username == '') {
					httpRequest.toast('请输入姓名');
					return false;
				}
				if (_this.userInfo.birthday == '') {
					httpRequest.toast('请选择生日')
					return false;
				}
				if (_this.userInfo.idcard == '') {
					httpRequest.toast('请输入身份证号码')
					return false;
				}
				if (!_this.checkidcard(_this.userInfo.idcard) && _this.userInfo.idcard != '') {
					httpRequest.toast('身份证号码输入有误')
					return false;
				}
				if (_this.userInfo.province_id == '') {
					httpRequest.toast('请选择省市区地址')
					return false;
				}
				if (_this.userInfo.address == '') {
					httpRequest.toast('请选择详细地址')
					return false;
				}
				let userinfo = this.userInfo
				delete userinfo.mobile
				httpRequest.request('/dhtapi/user/profile', 'POST', userinfo).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			rzTimeconfirm(e) {
				this.userInfo.birthday = httpRequest.returnDate(e.value);
				this.shows = false;
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.userInfo.province_id = area[0].value;
				this.userInfo.city_id = area[1].value;
				this.userInfo.area_id = area[2].value;
			},
			getLocation() {
				const _this = this
				uni.getSystemInfo({
					success(res) {
						let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
						let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
						if (locationEnabled == false || locationAuthorized == false) {
							//手机定位服务（GPS）未授权
							uni.showModal({
								title: '授权',
								content: '获取授权失败，是否前往授权？',
								success: function(result) {
									if (result.confirm) {
										uni.openAppAuthorizeSetting()
									}
								},
								fail: function() {
									uni.showToast({
										title: '请前往设置中授权位置信息',
										icon: 'none'
									})
								}
							})
						} else {
							uni.chooseLocation({
								success: function(response) {
									console.log('位置名称:', response);
									_this.userInfo.address = response.name
									_this.userInfo.latitude = response.latitude
									_this.userInfo.longitude = response.longitude
								}
							})
						}
					}
				})
			},
			getInfo() {
				httpRequest.request('/dhtapi/user/index', 'POST', {}).then(res => {
					// this.$store.state.userInfo = res.data
					let data = res.data
					this.userInfo = {
						avatar: data.avatar_text,
						username: data.username,
						gender: data.gender.toString(),
						birthday: data.birthday,
						wechat_code: data.wechat_code,
						ali_account: data.ali_account,
						idcard: data.idcard,
						open_bank: data.open_bank,
						bank_account: data.bank_account,
						bank_name: data.bank_name || "",
						province_id: data.province_id,
						city_id: data.city_id,
						area_id: data.area_id,
						address: data.address,
						longitude: data.longitude,
						latitude: data.latitude,
						mobile:data.mobile,
						mobile_note:data.mobile_note,
					}
					let cityinfo = data.cityinfo.split("/")
					this.area = cityinfo
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			uploadImg() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					_this.userInfo.avatar = res.fullurl
				}).catch(err => {});
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-safe-area-inset-bottom {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);

	}

	.flex1 {
		flex: 3;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.pops {
		padding: 0 60rpx 60rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			color: #000000;
			padding: 40rpx 0;
		}

		.lists {
			.sex {
				text-align: center;
				margin: 20rpx 0;
				color: #999999;
			}

			.sexs {
				color: #FF7510;
				text-align: center;
				margin: 20rpx 0;
			}
		}

		.submits {
			// background-image: linear-gradient(to right, #42CD5A, #55C900);
			background-color: #FF7510;
			border-radius: 40rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 30rpx 0rpx 0rpx 0rpx;
		}
	}


	.headimg {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.xiangji {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 100% 100%;
			background-image: url('/static/image/system/avatarup.png');
		}
	}


	.list {
		//margin: 30rpx 20rpx;
		margin-top: 30rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.child {
			padding: 15rpx 0;

			.name {
				font-size: 32rpx;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.data {
				.gerenxxyjt {
					width: 10rpx;
					height: 18rpx;
					margin-left: 10rpx;
					background-size: 100% 100%;
					background-image: url('/static/image/system/avatarup.png');
				}

				.xingbie {
					color: #333333;
					font-size: 28rpx;
				}
			}

			input {
				text-align: right;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}


	.btn {
		position: fixed;
		bottom: 50rpx;
		width: 90vw;
		color: #fff;
		background-color: #d48b39;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 44rpx;
		z-index: 100;
		margin: 30rpx 20rpx;
	}

	input {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}
</style>